<template>
  <div class="pf-flow-prop-base-info" id="js-properties-panel-custom">
    <pf-form :config="formConfig" :model="formData" @changeEvent="formChange"></pf-form>
  </div>
</template>

<script lang="ts">
import { defineComponent, onMounted, ref, Ref, toRefs, watch } from 'vue';
import { modeler, TaskName } from '@/views/page-config/flow/flow-modeler';
import { emptyForm, FormModel } from 'pf-component';
import { buildBaseInfo } from '@/views/page-config/flow/custom-properties/form-data';
import { nextTick } from 'vue';
export default defineComponent({
  name: 'ElementBaseInfo',
  props: ['businessObject'],
  setup(props) {
    const bo = toRefs<any>(props).businessObject;
    const formData: Ref = ref({});
    const formConfig: Ref<FormModel> = ref(emptyForm);
    const initByBO = () => {
      const activeElement = modeler.getActiveElement();
      formData.value = JSON.parse(JSON.stringify(activeElement.businessObject));
      formConfig.value = buildBaseInfo(formData.value.$type);
      if (formData.value && formData.value.$type === TaskName.subProcess) {
        // this.$set(this.elementBaseInfo, "isExpanded", this.elementBaseInfo.di?.isExpanded);
        formData.value.isExpanded = formData.value.di?.isExpanded;
      }
    };
    const updateToBO = (key: string) => {
      if (key === 'id') {
        modeler.updateActiveElement({
          id: formData.value[key],
          di: { id: `${formData.value[key]}_di` }
        });
        return;
      }
      if (key === 'isExpanded') {
        modeler.getModeling().toggleCollapse(modeler.getActiveElement());
        return;
      }
      const attrObj = Object.create(null);
      attrObj[key] = formData.value[key];
      modeler.updateActiveElement(attrObj);
    };
    const formChange = (newV: any, prop: string) => {
      updateToBO(prop);
    };
    onMounted(() => {});
    watch(
      bo,
      v => {
        if (v) {
          nextTick(() => {
            initByBO();
          });
        }
      },
      { immediate: false }
    );
    return {
      formConfig,
      formData,
      formChange
    };
  }
});
</script>
<style scoped lang="scss">
.#{$prefix} {
  &-flow-design {
    //margin: 10px;
    //padding: 0;
    //overflow-y: auto;
    height: 100%;
    &-canvas {
      height: 100%;
    }
    &-panel {
      position: absolute;
      height: 100%;
      width: 30%;
      top: 100px;
      right: 10px;
    }
    &-panel-custom {
      position: absolute;
      height: 100%;
      width: 30%;
      top: 100px;
      right: 10px;
      overflow-y: auto;
      background: #f0f2f5;
    }
  }
}
</style>
